17. kolovoza 2025.Hrvatski

Sveobuhvatan vodič za CSS svojstvo writing-mode, koji istražuje kako kontrolirati smjer teksta za internacionalizaciju (i18n) i stvoriti vizualno privlačne, globalno dostupne web stranice.

CSS Svojstvo writing-mode: Ovladavanje Međunarodnim Smjerom Teksta za Globalne Web Stranice

U današnjem povezanom svijetu, web stranice moraju udovoljiti raznolikoj publici, a ključan aspekt toga je rukovanje različitim smjerovima teksta. CSS svojstvo writing-mode moćan je alat koji programerima omogućuje kontrolu smjera u kojem tekst teče, omogućujući im stvaranje istinski internacionaliziranih (i18n) i vizualno privlačnih web iskustava. Ovaj sveobuhvatni vodič istražit će zamršenosti svojstva writing-mode, pružajući praktične primjere i korisne uvide koji će vam pomoći da ovladate smjerom teksta za globalne web stranice.

Razumijevanje Načina Pisanja

CSS svojstvo writing-mode određuje jesu li linije teksta postavljene horizontalno ili vertikalno te smjer u kojem blokovi napreduju. Ono igra ključnu ulogu u prilagodbi web stranica za jezike koji koriste različite smjerove pisanja, kao što su:

S lijeva na desno (LTR): Engleski, španjolski, francuski, njemački i mnogi drugi zapadni jezici.
S desna na lijevo (RTL): Arapski, hebrejski, perzijski i urdu.
Vertikalno: Tradicionalni kineski, japanski i mongolski.

Prema zadanim postavkama, web preglednici koriste način pisanja horizontal-tb, koji postavlja tekst horizontalno od vrha prema dnu. Međutim, writing-mode vam omogućuje da promijenite ovo zadano ponašanje i stvorite rasporede koji odgovaraju različitim smjerovima teksta.

Vrijednosti Svojstva `writing-mode`

Svojstvo writing-mode prihvaća nekoliko vrijednosti, od kojih svaka određuje različit smjer teksta i tijek bloka:

horizontal-tb: Horizontalno od vrha prema dnu. Linije teksta su horizontalne i teku od vrha prema dnu. Ovo je zadana vrijednost.
vertical-rl: Vertikalno s desna na lijevo. Linije teksta su vertikalne i teku s desna na lijevo. Blokovi napreduju prema dolje.
vertical-lr: Vertikalno s lijeva na desno. Linije teksta su vertikalne i teku s lijeva na desno. Blokovi napreduju prema dolje.
sideways-rl: Zastarjeli alias za vertical-rl.
sideways-lr: Zastarjeli alias za vertical-lr.

Sljedeće vrijednosti su također dostupne, ali se rjeđe koriste:

block-flow: Koristi smjer konteksta blok formata, na koji mogu utjecati druga svojstva.

Osnovni Primjeri

Ilustrirajmo upotrebu svojstva writing-mode s nekoliko jednostavnih primjera:

Horizontalni Tekst (Zadano)

Ovo je zadano ponašanje, stoga nije potreban eksplicitan writing-mode:


<p>Ovo je horizontalni tekst.</p>

Vertikalni Tekst (S desna na lijevo)

Za prikaz teksta vertikalno s desna na lijevo, koristite vertical-rl:


<p style="writing-mode: vertical-rl;">Ovo je vertikalni tekst (s desna na lijevo).</p>

Vertikalni Tekst (S lijeva na desno)

Za prikaz teksta vertikalno s lijeva na desno, koristite vertical-lr:


<p style="writing-mode: vertical-lr;">Ovo je vertikalni tekst (s lijeva na desno).</p>

Praktične Primjene Svojstva `writing-mode`

Osim osnovnog usmjeravanja teksta, writing-mode nudi niz praktičnih primjena za stvaranje vizualno privlačnih i međunarodno dostupnih web stranica:

1. Prilagodba RTL jezicima

Za web stranice koje podržavaju RTL jezike poput arapskog ili hebrejskog, writing-mode je ključan za ispravan prikaz teksta. Možete koristiti CSS selektore za primjenu writing-mode: rtl; na određene elemente ili cijeli dokument na temelju jezičnog atributa:


<html lang="ar">
  <body>
    <p>هذا نص عربي.</p>
  </body>
</html>


html[lang="ar"] {
  direction: rtl;
  unicode-bidi: bidi-override;
}

Iako je direction: rtl; ključno za postavljanje osnovnog smjera, možda će vam trebati i unicode-bidi: bidi-override; kako biste osigurali ispravno rukovanje tekstom s mješovitim smjerom. Moderni pristupi često preferiraju logička svojstva, o kojima će biti riječi kasnije.

2. Kreiranje Vertikalnih Navigacijskih Izbornika

Svojstvo writing-mode može se koristiti za stvaranje vertikalnih navigacijskih izbornika, koji se često viđaju na japanskim i kineskim web stranicama. To može dodati jedinstveni vizualni pečat vašoj stranici:


<ul class="vertical-menu">
  <li><a href="#">Početna</a></li>
  <li><a href="#">O nama</a></li>
  <li><a href="#">Usluge</a></li>
  <li><a href="#">Kontakt</a></li>
</ul>


.vertical-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vertical-menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

U ovom primjeru, text-orientation: upright; se koristi kako bi se osiguralo da je tekst unutar stavki vertikalnog izbornika prikazan uspravno, a ne rotirano.

3. Dizajniranje Rasporeda u Stilu Časopisa

Svojstvo writing-mode može se ugraditi za postizanje rasporeda u stilu časopisa. Na primjer, možete imati veliku sliku s vertikalnim tekstom koji je prekriva kako biste stvorili upečatljiv vizualni efekt.


<div class="magazine-section">
  <img src="image.jpg" alt="Magazine Image">
  <div class="vertical-text">Ekskluzivni Intervju</div>
</div>


.magazine-section {
  position: relative;
  width: 500px;
  height: 300px;
}

.magazine-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vertical-text {
  position: absolute;
  top: 0;
  right: 10px;
  color: white;
  font-size: 2em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  transform-origin: top right;
  transform: rotate(180deg); /* Potrebno za ispravan prikaz u različitim preglednicima */
}

Svojstvo transform: rotate(180deg); često je potrebno kako bi se osigurao dosljedan prikaz u različitim preglednicima, posebno u starijim verzijama.

4. Poboljšanje Vizualizacije Podataka

U vizualizaciji podataka, writing-mode može biti koristan za označavanje osi u grafikonima i dijagramima, posebno kada je prostor ograničen. Na primjer, možete rotirati oznake na vertikalnoj osi kako biste spriječili njihovo preklapanje.

Napredne Tehnike i Razmatranja

Da biste u potpunosti iskoristili moć svojstva writing-mode, razmotrite ove napredne tehnike i važne čimbenike:

1. Logička Svojstva i Vrijednosti

Moderni CSS uvodi logička svojstva i vrijednosti, koja pružaju fleksibilniji i semantičniji način rukovanja rasporedom i smjerom. Umjesto fizičkih svojstava poput left i right, koriste se logička svojstva poput start i end, koja se prilagođavaju smjeru pisanja. Na primjer:

margin-inline-start: Ekvivalentno margin-left u LTR i margin-right u RTL.
padding-block-start: Ekvivalentno padding-top u horizontalnim načinima pisanja i padding-left ili padding-right u vertikalnim načinima pisanja.

Korištenje logičkih svojstava čini vaš CSS prilagodljivijim i lakšim za održavanje, posebno kada se radi o više smjerova pisanja.

2. Kombiniranje `writing-mode` s Drugim CSS Svojstvima

Svojstvo writing-mode u interakciji je s drugim CSS svojstvima, kao što su text-orientation, direction i unicode-bidi, kako bi se kontrolirao izgled i ponašanje teksta. Razumijevanje ovih interakcija ključno je za postizanje željenih rezultata.

text-orientation: Određuje orijentaciju znakova u vertikalnim načinima pisanja. Vrijednosti uključuju upright, sideways, mixed i use-glyph-orientation.
direction: Određuje osnovni smjer teksta (LTR ili RTL).
unicode-bidi: Kontrolira kako se Unicode dvosmjerni algoritam primjenjuje na element.

3. Rukovanje Tekstom s Mješovitim Smjerom

Kada radite s tekstom koji sadrži i LTR i RTL znakove (npr. engleski tekst unutar arapskog odlomka), važno je koristiti svojstvo unicode-bidi kako biste osigurali ispravan prikaz. Vrijednost bidi-override često se koristi za prisilno postavljanje određenog smjera.


<p dir="rtl">هذا نص عربي يتضمن بعض الكلمات الإنجليزية <span style="unicode-bidi: bidi-override; direction: ltr;">like this example.</span></p>

4. Razmatranja o Fontovima

Nisu svi fontovi prikladni za vertikalno pisanje. Neki fontovi možda ne sadrže glifove za vertikalno pisanje ili se možda neće ispravno prikazivati. Kada koristite vertikalne načine pisanja, odaberite fontove koji su posebno dizajnirani za vertikalni tekst ili koji imaju dobru podršku za vertikalne glifove.

Fontovi iz istočnoazijskih zemalja (Kina, Japan, Koreja) općenito imaju vrlo dobru podršku za vertikalno pisanje.

5. Pristupačnost

Osigurajte da vaša upotreba svojstva writing-mode ne utječe negativno na pristupačnost. Osigurajte alternativni tekst za slike i drugi netekstualni sadržaj te se pobrinite da je tekst čitljiv i razumljiv za korisnike s invaliditetom. Koristite semantičke HTML elemente i ARIA atribute za poboljšanje pristupačnosti.

6. Kompatibilnost s Preglednicima

Svojstvo writing-mode ima dobru podršku u modernim preglednicima, ali stariji preglednici mogu zahtijevati prefikse dobavljača (npr. -webkit-writing-mode, -ms-writing-mode). Koristite CSS predprocesor poput Sass-a ili Less-a za automatizaciju dodavanja prefiksa dobavljača ili koristite alat poput Autoprefixera.

Najbolje Prakse za Korištenje `writing-mode`

Da biste učinkovito koristili writing-mode i stvorili globalno dostupne web stranice, slijedite ove najbolje prakse:

Koristite logička svojstva i vrijednosti kad god je to moguće. To će vaš CSS učiniti prilagodljivijim i lakšim za održavanje.
Odaberite odgovarajuće fontove za vertikalne načine pisanja. Testirajte svoje fontove kako biste osigurali da se ispravno prikazuju u vertikalnom tekstu.
Uzmite u obzir pristupačnost. Osigurajte da vaša upotreba svojstva writing-mode ne utječe negativno na pristupačnost za korisnike s invaliditetom.
Testirajte svoje rasporede u različitim preglednicima i na različitim uređajima. Osigurajte da se vaši rasporedi ispravno prikazuju na različitim platformama.
Koristite CSS predprocesore ili Autoprefixer za rukovanje prefiksima dobavljača. To će vam uštedjeti vrijeme i trud te osigurati da je vaš CSS kompatibilan sa starijim preglednicima.
Odvojite sadržaj od prezentacije. Koristite CSS za kontrolu prezentacije vašeg sadržaja i izbjegavajte korištenje HTML-a u svrhe stiliziranja.

Primjeri Globalnih Web Stranica Koje Koriste `writing-mode`

Mnoge web stranice diljem svijeta koriste writing-mode u različite svrhe, od prilagodbe RTL jezicima do stvaranja vizualno jedinstvenih rasporeda. Evo nekoliko primjera:

Novinske web stranice na arapskom ili hebrejskom: Ove stranice koriste direction: rtl i potencijalno prilagodbe svojstva writing-mode za ispravan prikaz teksta.
Japanske i kineske web stranice o umjetnosti i kulturi: Često uključuju vertikalno pisanje za naslove, izbornike i dekorativne elemente.
Modni časopisi: Često koriste vertikalni tekst u vizualnim rasporedima za stilske efekte.

Zaključak

CSS svojstvo writing-mode moćan je alat za stvaranje internacionaliziranih i vizualno privlačnih web stranica. Razumijevanjem različitih vrijednosti svojstva i načina na koji ono interagira s drugim CSS svojstvima, možete stvoriti rasporede koji se prilagođavaju različitim smjerovima teksta i poboljšati korisničko iskustvo za globalnu publiku. Ne zaboravite uzeti u obzir pristupačnost, kompatibilnost s preglednicima i odabir fontova kako biste osigurali da su vaše web stranice dostupne i vizualno privlačne svim korisnicima.

Kako se web razvoj nastavlja razvijati, ovladavanje tehnikama poput writing-mode postaje sve važnije za stvaranje istinski globalnih i inkluzivnih online iskustava. Prihvatite moć internacionalizacije i stvarajte web stranice koje odjekuju s korisnicima iz svih krajeva svijeta.